<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>交易明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--base css-->
    <link href="../css/mui/mui.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <!--自定义css-->
    <link href="../css/app/app.css" rel="stylesheet">
</head>

<body>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-content">
            <div class="trade-list">

            </div>
        </div>
    </div>

    <script src="../js/dsbridge.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/mui/mui.js"></script>
    <script src="../js/mui/mui.picker.min.js"></script>
    <script src="../js/layer.js"></script>
    <script src="../js/app/app-base.js"></script>
    <script src="../js/app/app-url.js"></script>
    <script src="../js/app/app-ajax.js"></script>

    <script>
        var page = 1;
        var limit = 10;
        var type = 0;
        var index = 0;
        var all_data = new Array();
        $(document).ready(function () {

            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        auto: true, // 首次进入自动加载
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
        });

        /**
         * 下拉刷新具体业务实现
         */
        function pulldownRefresh() {
            page = 1;
            var data = {
                userAccId: getUserId(),
                type: type,
                offset: page,
                limit: limit
            }
            getServerData(url_get_trad_record_list, data);
        }

        /**
         * 上拉加载具体业务实现
         */
        function pullupRefresh() {
            page++;
            var data = {
                userAccId: getUserId(),
                type: type,
                offset: page,
                limit: limit
            }
            getServerData(url_get_trad_record_list, data);
        }

        function getServerDataSuccess(url, data) {
            // var plist = new Array();
            var list = data.tradRecordList;
            var html_data = "";
            if(page == 1){
                index=0;
                all_data.length=0;
            }
            if (list.length > 0) {
                for (var i = 0; i < list.length; i++) {
                    all_data.push(list[i]);
                    var distance = "";
                    var color = "";
                    if (list[i].amount > 0) {
                        color = "skin-color";
                    } else {
                        color = "sub-skin1";
                    };
                    var createAt = list[i].createAt;
                    createAt = createAt.replace(" ", "</br>");
                    var name = "";
                    if (list[i].code == "0004" && !isEmpty(list[i].name))
                        name = list[i].businessName + "-" + list[i].name;
                    else
                        name = list[i].businessName;
                    html_data += '<div class="display-box trade center" id="' + index + '">' +
                        '<div class="trade-cell gray text-center">' + createAt + '</div>' +
                        '<div class="web-box1 trade-cell nk-s">' + name + '</div>' + '<div class="trade-cell ' + color +
                        ' price">￥' + list[i].payAmt + '</div>' + '</div>';
                    index++;
                };
            }
            if (page == 1) {
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                if (list.length > 0) {
                    mui('#pullrefresh').pullRefresh().refresh(true);
                }
                $(".trade-list").html(html_data);
            } else {
                $(".trade-list").append(html_data);
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(list.length != limit);
            }
        };

        mui(".trade-list").on('tap','.display-box',function(){
            dsBridge.call("details",all_data[this.id]);
            goto("trade-details");
        });

        function getServerDataFailed(url, data) {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
        }
    </script>
</body>

</html>